@import './variables';

/* 
.light--theme {
  background-color: rgba(0, 0, 0, 0.25);
}
.dark--theme {
  background-color: rgba(255, 255, 0, 0.25)
} 
*/
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

/* Color Mode */
body[class='theme--light'] {
  background-color: $color-white;
}
body[class='theme--dark'] {
  background-color: $color-black;
}

.v-application {
  font-family: $body-font-family, sans-serif !important;

  .title {
    /* To pin point specific classes of some components */
    font-family: $heading-font-family, sans-serif !important;
  }

  /* 
  .v-list .v-list-item--active{
    color: var(--warning--text) !important;
  } 
  */

  /* Theme Light */
  &.theme--light {
    // background-color: rgba(155, 155, 155, 0.05);
    .v-navigation-drawer--floating.theme--light {
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        /* background-image: linear-gradient(180deg,#3cd18a,#3c6fd1 .01%,#1a2d51); */
      }
    }
    /* 
    .v-navigation-drawer {
      background-color: #ececec;
    } 
    */
    /* 
    .v-list-group {
      background-color: rgb(0, 0, 0, 0.25);
    } 
    */
  }
  /* Theme Light */
  &.theme--dark {
    /* background-color: rgba(0, 0, 0, 0.75); */
    .v-navigation-drawer--floating.theme--dark {
      background-image: linear-gradient(195deg, #42424a, #191919) !important;
      /* background-image: linear-gradient(60deg,#3cd18a,#3c6fd1 .01%,#7ca9ff); */
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.15;
        background-color: #191919;
        /* background-image: linear-gradient(180deg,#3cd18a,#3c6fd1 .01%,#091221); */
      }
    }
    /* 
    .v-list-group {
      background-color: rgba(0, 0, 0, 0.25);
    } 
    */
    /* 
    .v-list-item--active.v-list-item--link {
      &:before {
        // background-color: var(--v-accent-base);
        background-color: rgba(0,0,0,0.175);
      }
    } 
    */
  }
  /* .theme-link {
    &:before, &:after {
      content:'';
      position: relative;
    }

    &:before {
      transition: width .5s, height .5s, border-bottom-color 0s;
      transition-delay: .5s, 0s, .5s;
      width: 200px;
      height: 64px;
      border-left: 3px solid #00e2ff;
      border-bottom: 3px solid #00e2ff;
    }
    
    &:after {
      transition: width .5s, height .5s, border-right-color .5s;
      transition-delay: 0s, .5s, .5s;
      width: 200px;
      height: 64px;
      border-top: 3px solid #00e2ff;
      border-right: 3px solid #00e2ff;
    }
  } */

  .gradient-b-bottom {
    &:before {
      width: 100%;
      height: 100%;
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      display: block;
      background: rgb(2, 0, 36);
      background: -moz-linear-gradient(
        180deg,
        rgba(2, 0, 36, 0) 63%,
        rgba(0, 0, 0, 0.7) 100%
      );
      background: -webkit-linear-gradient(
        180deg,
        rgba(2, 0, 36, 0) 63%,
        rgba(0, 0, 0, 0.7) 100%
      );
      background: linear-gradient(
        180deg,
        rgba(2, 0, 36, 0) 63%,
        rgba(0, 0, 0, 0.7) 100%
      );
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#000000",GradientType=1);
    }
  }
  /* default button icon */
  .v-btn--icon {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    &:hover {
      opacity: 0.75;
    }
    &:before {
      background: none;
    }
    .v-ripple__container {
      display: none;
      &:before {
        background: none;
      }
    }
  }
}

.background-image-dark {
  background-image: url('https://images.unsplash.com/photo-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1152&h=940&q=80');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

.transparent-8 {
  background: rgba(255, 255, 255, 65%);
}

.title {
  &-page {
    margin-bottom: 12px;
    &-sub {
      margin-bottom: 10px;
    }
  }
}

.bg {
  &-wave {
    background-image: url('~/static/svg/wave.svg');
    background-position: bottom center;
    background-repeat: no-repeat;
    &-dark {
      background-image: url('~/static/svg/wave-dark.svg');
      background-position: bottom center;
      background-repeat: no-repeat;
    }
  }
}
